<template>
  <div class="search">
    <van-search class="search-input" v-model="searchValue" autocomplete="off" autofocus show-action shape="round"
      :placeholder="showKeyword" @search="onSearch" @update:model-value="onValChange" @clear="initData"
      @focus="onFocus">
      <template #left>
        <van-icon class="arrow" name="arrow-left" @click="jump" />
      </template>
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <div class="search-content" v-show="!showSuggest && !showResult">
      <!-- 搜索历史 -->
      <History @onSearch='hdContentSearch'>
        <template #title>
          <div class="n-title">
            <h3>历史</h3>
            <van-icon name="delete-o" @click="searchHistory = []" />
          </div>
        </template>
      </History>

      <!-- 热搜榜 -->
      <HotSearch @onSearch='hdContentSearch'></HotSearch>
    </div>


    <!-- 搜索建议 -->
    <Suggest ref="suggestRef" v-show="showSuggest" @isShow="suggestIsShow" @search="suggestSearch"></Suggest>

    <!-- 搜索结果 -->
    <Result ref="resultRef" v-show="showResult"></Result>

  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia';
import { PlayStore } from '@/store/playlist'
import { getSearchDefault } from '@/request/api/musicApi'
import Suggest from '@/components/search/Suggest.vue'
import Result from '@/components/search/Result.vue'
import HotSearch from '@/components/search/HotSearch.vue'
import History from '@/components/search/History.vue'

const $store = PlayStore();
let { upDatesearchHistory, searchHistory } = storeToRefs($store)

const $router = useRouter();
let searchValue = ref('');
let showSuggest = ref(false);
let jumpName = "search"

onMounted(() => {
  initData()
})

const initData = () => {
  resetData();
  getDefault();
}

// 默认搜索
let showKeyword = ref('请输入搜索内容');
let realkeyword = ''; // 默认的搜索关键字

const getDefault = async () => {
  await getSearchDefault().then(data => {
    showKeyword.value = data.data.showKeyword;
    realkeyword = data.data.realkeyword;
  })
}

// 搜索框值改变
let timer;
let suggestRef = ref();
const onValChange = (val) => {
  // 没有数据的时候  重置到搜索页面
  if (val == '') return resetData();

  showSuggest.value = true;
  if (timer) clearTimeout(timer)
  timer = setTimeout(async () => {
    suggestRef.value.searchSuggest(val);
  }, 300);
}

// 聚焦搜索框
const onFocus = () => {
  // 搜索值不为空
  if (searchValue.value != '') {
    showSuggest.value = true;
    showResult.value = false;
    suggestRef.value.searchSuggest(searchValue.value);
  }
}

// 搜索建议状态
const suggestIsShow = (data) => {
  data != false ? jumpName = 'suggest' : jumpName = 'search'
  if (data) showSuggest.value = data
}

// 建议里点击列表搜索
const suggestSearch = (data) => {
  searchValue.value = data;
  onSearch();
}

// 点击搜素
let showResult = ref(false);
let resultRef = ref();
const onSearch = async () => {
  if (searchValue.value === '') searchValue.value = realkeyword;
  $store.updateSearchHistory(searchValue.value); //增加搜索历史
  showResult.value = true;    //显示搜索结果
  showSuggest.value = false;  //隐藏搜索建议

  // 获取搜索结果
  resultRef.value.resetData();
  resultRef.value.getMultimatch(searchValue.value);
  jumpName = "result";
}

// 组件跳转时 返回的列表
const jump = () => {
  if (jumpName == 'search') {
    $router.go(-1);
  } else if (jumpName == 'suggest' || jumpName == 'result') {
    initData()
  }
}

// 热搜列表点击时搜素
const hdContentSearch = (data) => {
  searchValue.value = data;
  onSearch()
}

// 重置数据
const resetData = () => {
  searchValue.value = '';
  showSuggest.value = false;
  showResult.value = false;
  jumpName = "search";
  suggestRef.value.resetData();
  resultRef.value.resetData();
}
</script>
  
<style lang='less' scoped>
.search {
  width: 100%;
  height: 100%;
}

.search-input {

  .arrow {
    margin-right: 20px;
  }
}

.search-content {
  margin: 0 auto;
  margin-top: 20px;
  width: 90%;

  .n-title {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    .van-icon {
      color: @font-fu;
    }
  }
}
</style>